<!--
 * @description 组件
 * @author: 陈陈
 * @date: 2025/05/09
 * @phone: 18560000860
 * @email: 18560000860@qq.com
 * @company: 济南晨霜信息技术有限公司 /
 * @business: 承接前后端项目的开发
-->
<template>
	<view
		class="pure-upload-list"
		:class="_classes"
		:style="_styles"
	>
		<view
			class="pure-upload-list__item"
			v-for="(_item, _index) in list"
			:key="_index"
			:hover-class="hoverClass"
			@tap="$emit('onClick', _index, _item)"
		>
			<view
				class="pure-upload-list__item__icon"
				v-if="_item?.[iconKey]"
			>
				<pure-icon :name="_item?.[iconKey]"></pure-icon>
			</view>
			<view class="pure-upload-list__item__body">
				<view class="pure-upload-list__item__name pure-line-1">
					{{ _getFileName(_item) }}
				</view>
				<view class="pure-upload-list__item__progress">
					<view class="pure-upload-list__item__progress__progress">
						<pure-progress
							:percent="_item?.progress"
							:showPivot="false"
							size="4px"
							v-bind="progressOpts"
						></pure-progress>
					</view>
					<view
						class="pure-upload-list__item__progress__text"
						v-if="showProgressText"
					>
						{{ _item?.progress?.toFixed(2) }}%
					</view>
				</view>
			</view>
			<view class="pure-upload-list__item__status">
				<view
					class="pure-upload-list__item__status__icon pure-upload-list__item__status__icon--uploading"
					v-if="_item?.status === 'uploading'"
				>
					<pure-loading :name="uploadingIconName"></pure-loading>
				</view>
				<view
					class="pure-upload-list__item__status__icon pure-upload-list__item__status__icon--fail"
					v-else-if="_item?.status === 'fail'"
				>
					<pure-icon :name="failIconName"></pure-icon>
				</view>
				<view
					class="pure-upload-list__item__status__icon pure-upload-list__item__status__icon--success"
					v-else-if="_item?.status === 'success'"
				>
					<pure-icon :name="successIconName"></pure-icon>
				</view>

				<view
					class="pure-upload-list__item__status__icon pure-upload-list__item__status__icon--delete"
					v-if="_item?.status === 'waiting' || _item?.status === 'fail' || _item?.status === 'success'"
					:hover-class="hoverClass"
					@tap.stop="$emit('onDelete', _index, _item)"
				>
					<pure-icon :name="deleteIconName"></pure-icon>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import commonComponentOptions from "../../config/options";
	export default {
		options: commonComponentOptions
	};
</script>

<script setup>
	import { ref, computed, useAttrs } from "vue";
	import props from "./props";

	// -------------------------------------------------------------------------------- Refs

	// -------------------------------------------------------------------------------- Props
	const _props = defineProps(props);

	// -------------------------------------------------------------------------------- Emits
	const _emits = defineEmits(["onDelete", "onClick"]);

	// -------------------------------------------------------------------------------- Classes
	const _classes = computed(() => {
		const array = [];
		return array;
	});

	// -------------------------------------------------------------------------------- Styles
	const _styles = computed(() => {
		const array = [];

		// 间距
		if (_props.gap) array.push(`--pure-upload-list-gap: ${_props.gap}`);

		return array;
	});

	// 获取文件名称
	function _getFileName(item) {
		if (_props.nameKey) return item?.[_props.nameKey] || "";
		return item?.[_props.pathKey]?.split("/")?.pop() || "";
	}
</script>

<style scoped lang="scss">
	@import "./style.scss";
</style>
